<template>
  <div class="container" id="earth">111</div>
</template>
<script lang="ts" setup>
// 引入世界地图的图片
import starfield from './earth/starfield.jpg';
import worldJpg from './earth/word.jpeg';
import * as echarts from 'echarts';
import 'echarts-gl';
import { onMounted } from 'vue';

onMounted(() => {
  const earthDom = document.getElementById('earth');
  const myChart = echarts.init(earthDom);

  const option = {
    globe: {
      baseTexture: worldJpg,
      heightTexture: worldJpg,
      environment: starfield,
      shading: 'lambert',
      viewControl: {
        autoRotate: false, // 禁止自动旋转
        distance: 200, // 初始距离
        alpha: 45, // 初始上下旋转角度
        beta: 20, // 初始左右旋转角度
        targetCoord: [121.4737, 31.2304], // 上海的经纬度
      },
      postEffect: {
        enable: true, // 启用后处理效果
      },
      light: {
        main: {
          intensity: 1.5,
          shadow: true,
        },
        ambient: {
          intensity: 0.5,
        },
      },
    },
    series: [
      {
        type: 'scatter3D',
        coordinateSystem: 'globe',
        data: [
          {
            name: '上海',
            value: [121.4737, 31.2304, 0],
          },
          {
            name: '澳网（墨尔本）',
            value: [144.58, -37.5, 0],
          },
          {
            name: '法网（巴黎）',
            value: [2.25, 48.52, 0],
          },
          {
            name: '温网（伦敦）',
            value: [0, 52, 0],
          },
          {
            name: '美网（纽约）',
            value: [-74.0, 40.43, 0],
          },
          {
            name: 'WTA总决赛（利雅得）',
            value: [46.43, 24.41, 0],
          },
          {
            name: 'ATP总决赛（都灵）',
            value: [7.42, 45.04, 0],
          },
        ],
        symbolSize: 10, // 点的大小
        itemStyle: {
          color: 'red', // 点的颜色
          borderColor: '#fff', // 边框颜色
          borderWidth: 1, // 边框宽度
        },
        label: {
          show: true,
          formatter: '{b}', // 显示点的名称
          color: '#fff', // 字体颜色
          fontSize: 14,
        },
      },
    ],
    tooltip: {
      trigger: 'item', // 触发类型为数据项
      formatter: function (params:any) {
        // 自定义提示框内容
        const { name, value } = params.data;
        return `
        <div style="text-align: center;">
          <p style="color: #fff; font-size: 16px;">${name}</p>
          <p style="color: #fff; font-size: 14px;">经度: ${value[0].toFixed(2)}</p>
          <p style="color: #fff; font-size: 14px;">纬度: ${value[1].toFixed(2)}</p>
        </div>
      `;
      },
      backgroundColor: 'rgba(0, 0, 0, 0.7)', // 背景颜色
      borderColor: '#fff', // 边框颜色
      borderWidth: 1, // 边框宽度
      textStyle: {
        color: '#fff', // 文字颜色
        fontSize: 12,
      },
    },
  };
  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
}
</style>
